<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 定义文档的字符编码为UTF-8，确保能正确显示各种字符 -->
    <meta charset="UTF-8">
    <!-- 设置视口，使页面在移动设备上能正确显示，宽度自适应设备宽度，初始缩放比例为1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题，显示在浏览器标签栏上 -->
    <title>急速问诊</title>
    <style>
        /* 通配符选择器，将所有元素的盒模型设置为border-box，
        并且外边距和内边距都初始化为0，方便后续布局控制 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* 定义名为top的类，用于页面顶部区域的样式设置 */
        .top {
            /* 使用flex布局，使子元素在水平方向均匀分布，两端对齐 */
            display: flex;
            justify-content: space-between;
            /* 设置底部外边距为50px，与下方元素拉开距离 */
            margin-bottom: 50px;
        }

        /* 针对top类下的img元素设置样式 */
        .top img {
            /* 设置图片宽度为20px */
            width: 20px;
            /* 设置图片高度为20px */
            height: 20px;
        }

        /* 定义名为title的类，用于设置标题的样式 */
        .title {
            /* 设置字体大小为20px */
            font-size: 20px;
            /* 设置字体加粗程度为800，通常是较粗的字体样式 */
            font-weight: 800;
        }

        /* 定义名为title_right的类，用于设置右侧标题相关的样式 */
        .title_right {
            /* 设置字体大小为15px */
            font-size: 15px;
            /* 设置字体颜色为指定的淡蓝色，颜色值为#AECFD8 */
            color: #AECFD8;
        }

        /* 定义名为middle的类，用于页面中间部分的样式设置 */
        .middle img {
            /* 设置图片高度为200px */
            height: 200px;
            /* 设置图片左边距为50px，使其在水平方向有一定偏移 */
            margin-left: 50px;
        }

        /* 定义名为num的类，用于设置特定数字的样式，比如这里可能是显示时间等数字信息 */
        .num {
            /* 设置字体加粗程度为800，突出显示数字 */
            font-weight: 800;
            /* 设置字体颜色为指定的浅蓝色，颜色值为#28B6BC */
            color: #28B6BC;
        }

        /* 定义名为middle_bottom的类，用于页面中间底部部分的样式设置 */
        .middle_bottom {
            /* 设置左边距为90px，使其在水平方向有一定偏移 */
            margin-left: 90px;
            /* 设置顶部外边距为20px，与上方元素拉开距离 */
            margin-top: 20px;
        }

        /* 针对middle_bottom类下的span元素设置样式 */
        .middle_bottom span {
            /* 设置字体加粗程度为800，突出显示内容 */
            font-weight: 800;
        }

        /* 定义名为bottom1的类，用于页面底部区域的样式设置，这里有多个相同类名的div，
        可能是用于展示类似的信息模块，比如不同的问诊方式等 */
        .bottom1 {
            /* 使用flex布局，按行排列子元素 */
            display: flex;
            flex-direction: row;
            /* 设置底部外边距为50px，与下方元素拉开距离 */
            margin-bottom: 50px;
            /* 设置顶部外边距为50px，与上方元素拉开距离 */
            margin-top: 50px;
            /* 在顶部添加一条1px宽的灰色实线边框，用于分隔区域 */
            border-top: 1px solid gray;
            /* 设置顶部内边距为20px，使内部元素与顶部边框有一定距离 */
            padding-top: 20px;
        }

        /* 针对bottom1类下的left_p类（这里是img元素应用了left_p类）设置样式 */
        .bottom1.left_p {
            /* 设置宽度为80px */
            width: 80px;
            /* 设置高度为80px */
            height: 80px;
        }

        /* 针对bottom1类下的img元素设置样式（这里与前面top img的样式可能有所不同，
        具体取决于不同的布局需求） */
        .bottom1 img {
            /* 设置宽度为20px */
            width: 20px;
            /* 设置高度为20px */
            height: 20px;
            /* 在flex布局中，使图片自身在垂直方向居中对齐 */
            align-self: center;
            /* 在flex布局中，使图片自身在水平方向靠右对齐 */
            justify-self: end;
        }

        /* 定义名为bottom2的类，用于bottom1内部某个子区域的样式设置，
        可能是用于展示更详细的问诊相关信息 */
        .bottom1.bottom2 {
            /* 使用flex布局，按列排列子元素 */
            display: flex;
            flex-direction: column;
            /* 设置flex属性为1，使其能自适应占据剩余空间 */
            flex: 1;
            /* 在flex布局中，使子元素在水平方向左对齐 */
            align-items: start;
            /* 在flex布局中，使子元素在垂直方向居中对齐 */
            justify-content: center;
            /* 设置左边距为10px，使其在水平方向有一定偏移 */
            margin-left: 10px;
        }

        /* 针对bottom1类下的bottom2类中的one类（这里是span元素应用了one类）设置样式 */
        .bottom1.bottom2.one {
            /* 设置字体大小为20px */
            font-size: 20px;
            /* 设置底部外边距为10px，与下方元素拉开距离 */
            margin-bottom: 10px;
        }

        /* 针对bottom1类下的bottom2类中的p元素设置样式 */
        .bottom1.bottom2 p {
            /* 设置字体颜色为灰色，用于显示相对次要的说明信息 */
            color: grey;
            /* 设置字体大小为15px */
            font-size: 15px;
        }
    </style>
</head>

<body>
    <!-- 使用top类的div，用于构建页面顶部区域，包含返回箭头、主标题和问诊记录相关信息 -->
    <div class="top">
        <img src="./arrow-left.png" alt="">
        <span class="title">急速问诊</span>
        <span class="title_right">问诊记录</span>
    </div>
    <!-- 使用middle类的div，用于构建页面中间区域，可能是展示与问诊相关的主要图片等内容 -->
    <div class="middle">
        <img src="./consult-fast.png" alt="">
    </div>
    <!-- 使用middle_bottom类的div，用于构建页面中间底部区域，可能是展示问诊相关的一些数据或说明，比如这里的快速匹配时间等 -->
    <div class="middle_bottom">
        <span class="num">20s</span>
        <span>快速匹配专业医生</span>
    </div>
    <!-- 使用bottom1类的div，用于构建页面底部区域的一个信息模块，这里可能是展示一种问诊方式相关的信息，比如三甲图文问诊等 -->
    <div class="bottom1">
        <img class="left_p" src="./doctor.png" alt="">
        <div class="bottom2">
            <span class="one">三甲图文问诊</span>
            <p>三甲主治及以上级别医生</p>
        </div>
        <img src="./arrow-right.png" alt="">
    </div>
    <!-- 再次使用bottom1类的div，构建另一个类似的页面底部信息模块，可能是展示另一种问诊方式等相关信息 -->
    <div class="bottom1">
        <img class="left_p" src="./message.png" alt="">
        <div class="bottom2">
            <span class="one">三甲图文问诊</span>
            <p>三甲主治及以上级别医生</p>
        </div>
        <img src="./arrow-right.png" alt="">
    </div>
</body>

</html>